<template>
    <div>
        <van-nav-bar title="商品评价" left-text="返回" left-arrow @click-left="proxy.$leftClick()" />
        <div class="popbox">
            <h3 class="title">
                商品评论
            </h3>
            <div class="edit-box">
                <van-field v-model="model.pinglun" rows="5" autosize type="textarea" maxlength="500" placeholder="请输入评论内容"
                    show-word-limit class="ping-area" />
            </div>
            <div class="ping-star">
                <van-rate v-model="model.xingxing" />
            </div>
            <van-button @click="todoSubmitMessage" block type="primary" class="mt10">发布评论</van-button>
        </div>
        <div class="edit-msg">
            <div class="edit-list" v-if="data.length > 0">
                <div class="edit-item" v-for="(item, index) in data" :key="index">
                    <div class="name item ">
                        {{ item.user }}
                    </div>
                    <div class="time item ">
                        {{ dateFormatInit(Number(item.time)) }}
                    </div>
                    <div class="star items">
                        评分: <van-rate v-model="item.xingxing" readonly />
                    </div>
                    <div class="content items">
                        {{ item.pinglun }}
                    </div>
                </div>
            </div>
            <div class="empty" v-else>
                <van-empty description="暂无评论,请先发布评论哦" />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { getCurrentInstance, ref, onBeforeMount } from 'vue';
import { useRoute } from 'vue-router';
import { getDingdan } from '@/api/dingdan';
import { request2 } from '../util/req'
import { showDialog } from 'vant'
import moment from 'moment'
import { useMy } from '@/store/my';

const myZl = useMy();
const route = useRoute();
const { proxy }: any = getCurrentInstance();
const data = ref<model[]>([])

const dateFormatInit = (time: number, type = 'YYYY-MM-DD HH:mm:ss') => {
    return moment(time).format(type);
}

type model = {
    user: string,
    xingxing: number,
    pinglun: string,
    ids: string,
    time: string
}
const model = ref<model>({} as model)

onBeforeMount(async () => {
    // 将id传入
    model.value.ids = route.params.id as string;
    model.value.xingxing = 5
    if(myZl.zlData.username == undefined){
        await myZl.fetchMyData()
    }
    model.value.user = myZl.zlData.username
    let res:model[]= (await request2.get("/data")).data;
    data.value = res.filter(item=>item.ids == model.value.ids);
    console.log(data.value);

})

const todoSubmitMessage = async () => {
    let res: dataObj[] = (await getDingdan(localStorage.getItem("userId") as string)).data;
    let data1 =  res.some(item => item.proid == model.value.ids);
    
    if (data1) {
        await request2.post("/data", {
            ...model.value,
            time:  Date.now().toString()
        })
        showDialog({
            message: "添加评论成功"
        })
        let res2:model[] = (await request2.get("/data")).data;
        data.value = res2.filter(item=>item.ids == model.value.ids)
    } else {
        showDialog({
            message: "未购买此商品"
        })
    }
}

</script>

<style>
.navBar.detail-navBar .van-nav-bar__content .van-icon {
    color: #333;
}
</style>

<style scoped lang="scss">
.popbox {
    padding-top: 40px;

    .title {
        color: #333;
        text-align: center;
    }

    .edit-box {
        padding: 10px;
    }

    .ping-area {
        border: 1px solid #ddd;
        border-radius: 10px;
    }

    .ping-star {
        margin-top: 15px;
    }

    .mt10 {
        margin-top: 10px;
    }
}
.edit-item{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    height: 100px;
    width: 100vw;
    background-color:gainsboro;
    margin-top: 10px;
    padding: 20px;
    box-sizing: border-box;
    .item{
        width: 40vw;
        margin-bottom: 10px;
        height: 20px;
        overflow: visible;
        font-size: 12px;
    }
    .items{
        width: 40vw;
    }
}
</style>